﻿@namespace MXERP.Blazor.Components
@inherits MudComponentBase

<div @attributes="UserAttributes" Class="@TabsClassName">
    <CascadingValue Value="@this" IsFixed="true">
        <div class="@TabBarClassName">
            <div class="tabbar-toolbar-content d-flex align-end mud-height-full">
                @foreach (var tabPanel in _tabPanels)
                {
                    @RenderTab(tabPanel)
                }
            </div>
        </div>
        <div class="@PanelsClassName">
            @ChildContent
        </div>
    </CascadingValue>
        
</div>

@code {
    RenderFragment RenderTab(TabPanel panel) => 
        @<div class="@GetTabClass(panel)"  @onclick=@( () => ActivatePane(panel.Key) )>
            <div class="absolute mud-width-full mud-height-full md-tab-bg">
                <svg class="mud-width-full mud-height-full">
                    <defs>
                        <symbol id="geometry-left" viewBox="0 0 214 36">
                            <path d="M17 0h197v36H0v-2c4.5 0 9-3.5 9-8V8c0-4.5 3.5-8 8-8z"></path>
                        </symbol>
                        <symbol id="geometry-right" viewBox="0 0 214 36">
                            <use xlink:href="#geometry-left"></use>
                        </symbol>
                        <clipPath>
                            <rect width="100%" height="100%" x="0"></rect>
                        </clipPath>
                    </defs>
                    <svg width="50%" height="100%">
                        <use xlink:href="#geometry-left" width="214" height="36" fill="currentColor"></use>
                    </svg>
                    <g transform="scale(-1, 1)">
                        <svg width="50%" height="100%" x="-100%" y="0">
                            <use xlink:href="#geometry-right" width="214" height="36" fill="currentColor"></use>
                        </svg>
                    </g>
                </svg>
            </div>
            @if (!String.IsNullOrEmpty(panel.Text) && String.IsNullOrEmpty(panel.Icon))
            {
                <span> @panel.Text</span>
            }
            else if (String.IsNullOrEmpty(panel.Text) && !String.IsNullOrEmpty(panel.Icon))
            {
                <MudIcon Icon="@panel.Icon" />
            }
            else if (!String.IsNullOrEmpty(panel.Text) && !String.IsNullOrEmpty(panel.Icon))
            {
                <MudIcon Icon="@panel.Icon" Size="Size.Small" />
                <span> @panel.Text</span>
            }
            @if(panel.Closable)
            {
                <MudIconButton Color="Color.Inherit" Icon="@Icons.Material.Outlined.Close" Size="Size.Small" @onclick="(e) => RemoveTabPanel(panel)" />
            }
        </div>;
}